<template>
  <PageWrapper>
    <CardItemList
      :params="params"
      :api="pageList"
      :create-auth="'channel:info:update'"
      @get-method="getMethod"
      @create="handleCreate">
      <template #header>
        <Button type="primary" v-auth="'channel:info:update'" @click="handleCreate">
          新增
        </Button>
      </template>
      <template #content="{ record }">
        <CardItem
          :data="record"
          height="300"
          :edit-auth="'channel:info:update'"
          @edit="handleUpdate"
          :delete-auth="'channel:info:delete'"
          @delete="handleDelete">
          <template #cardTitle>
            {{ record.channelName }}
          </template>
        </CardItem>
      </template>
    </CardItemList>
    <PayChannelDrawer @register="registerDrawer" @success="handleSuccess"/>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import {PageWrapper} from '/@/components/Page';
  import {CardItem, CardItemList} from '/@/components/CardList';
  import {Button} from '/@/components/Button';
  import {useDrawer} from '/@/components/Drawer';
  import {useMessage} from '/@/hooks/web/useMessage';

  import {pageList, deleteById} from './info.api';
  import PayChannelDrawer from './PayChannelDrawer.vue';

  const {notification, createConfirm} = useMessage();
  const [registerDrawer, {openDrawer}] = useDrawer();
  // 请求api时附带参数
  const params = {};

  const handleCreate = () => {
    openDrawer(true, {isUpdate: false});
  };

  const handleUpdate = (record) => {
    openDrawer(true, {record, isUpdate: true});
  };

  const handleDelete = (record) => {
    createConfirm({
      iconType: 'warning',
      title: '确认',
      content: `确定删除支付渠道 ${record.channelName} ？`,
      onOk: async () => {
        deleteById(record.id, handleSuccess);
        notification.success({message: `成功删除${record.channelName}`});
      },
    });
  };

  let reload = () => {
  };

  // 获取内部fetch方法;
  function getMethod(m: any) {
    reload = m;
  }

  function handleSuccess() {
    reload()
  }
</script>
